<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>绑定账号</title>
		<meta name="format-detection" content="telephone=no,email=no"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
		<!-- <link href="__PUBLIC__/Admin/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet"> -->
		<!-- <link href="__PUBLIC__/Admin/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet"> -->

		<link href="__PUBLIC__/Admin/css/animate.min.css" rel="stylesheet">
		<!-- <link href="__PUBLIC__/Admin/css/style.min862f.css?v=4.1.0" rel="stylesheet"> -->
		<script>
				;
				(function (win, lib) {
					var doc = win.document;
					var docEl = doc.documentElement;
					var metaEl = doc.querySelector('meta[name="viewport"]');
					var flexibleEl = doc.querySelector('meta[name="flexible"]');
					var dpr = 0;
					var scale = 0;
					var tid;
					var flexible = lib.flexible || (lib.flexible = {});
			
					if (metaEl) {
						// console.warn('将根据已有的meta标签来设置缩放比例');
						var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
						if (match) {
							scale = parseFloat(match[1]);
							dpr = parseInt(1 / scale);
						}
					} else if (flexibleEl) {
						var content = flexibleEl.getAttribute('content');
						if (content) {
							var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
							var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
							if (initialDpr) {
								dpr = parseFloat(initialDpr[1]);
								scale = parseFloat((1 / dpr).toFixed(2));
							}
							if (maximumDpr) {
								dpr = parseFloat(maximumDpr[1]);
								scale = parseFloat((1 / dpr).toFixed(2));
							}
						}
					}
					if (!dpr && !scale) {
						var isAndroid = win.navigator.appVersion.match(/android/gi);
						var isIPhone = win.navigator.appVersion.match(/iphone/gi);
						var devicePixelRatio = win.devicePixelRatio;
						if (isIPhone) {
							// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
							if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
								dpr = 3;
							} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
								dpr = 2;
							} else {
								dpr = 1;
							}
						} else {
							// 其他设备下，仍旧使用1倍的方案
							dpr = 1;
						}
						scale = 1 / dpr;
					}
					docEl.setAttribute('data-dpr', dpr);
					if (!metaEl) {
						metaEl = doc.createElement('meta');
						metaEl.setAttribute('name', 'viewport');
						metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale +
							', minimum-scale=' + scale + ', user-scalable=no');
						if (docEl.firstElementChild) {
							docEl.firstElementChild.appendChild(metaEl);
						} else {
							var wrap = doc.createElement('div');
							wrap.appendChild(metaEl);
							doc.write(wrap.innerHTML);
						}
					}
			
					function refreshRem() {
						var width = docEl.getBoundingClientRect().width;
						if (width / dpr > 750) {
							width = 750 * dpr;
						}
						var rem = width / 10;
						docEl.style.fontSize = rem + 'px';
						flexible.rem = win.rem = rem;
					}
					win.addEventListener('resize', function () {
						clearTimeout(tid);
						tid = setTimeout(refreshRem, 100);
					}, false);
					win.addEventListener('pageshow', function (e) {
						if (e.persisted) {
							clearTimeout(tid);
							tid = setTimeout(refreshRem, 100);
						}
					}, false);
					if (doc.readyState === 'complete') {
						doc.body.style.fontSize = 12 * dpr + 'px';
					} else {
						doc.addEventListener('DOMContentLoaded', function (e) {
							doc.body.style.fontSize = 12 * dpr + 'px';
						}, false);
					}
			
					refreshRem();
					flexible.dpr = win.dpr = dpr;
					flexible.refreshRem = refreshRem;
					flexible.rem2px = function (d) {
						var val = parseFloat(d) * this.rem;
						if (typeof d === 'string' && d.match(/rem$/)) {
							val += 'px';
						}
						return val;
					}
					flexible.px2rem = function (d) {
						var val = parseFloat(d) / this.rem;
						if (typeof d === 'string' && d.match(/px$/)) {
							val += 'rem';
						}
						return val;
					}
				})(window, window['lib'] || (window['lib'] = {}));
			</script>
	</head>
	<style type="text/css">
		/* body,
		canvas,
		div {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			-khtml-user-select: none;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		}
		.facesj{
			display: inline-block;
			background-color: #1fa1dc;
			width: 60px;
		    height: 32px;
		    line-height: 32px;
		    border-radius: 3px;
		    text-align: center;
		    font-size: 14px;
		    margin-top:6px;
		    border: 1px solid #1fa1dc;
		    color: #FFF;
		    margin-left:10px;
		}
		.form-control{width:70%;display: inline-block;} */
	    html,body{
			margin: 0;
			padding: 0;
			border: none;
			background-color: #fff;
			color: #323332;
		}
		h3{
			text-align: center;
			font-size: 0.32rem;
			margin: 0.4rem;
		}
        label{
			float: left;
			font-size: 0.32rem;
			vertical-align: middle;
		}
		input{
		   flex: 1;
           height: 1.2rem;
           display: block;
		   border: none;
           padding-left: 0.5rem;
           font-size: 0.39rem;
		   box-sizing: border-box;
           color: #000;
		   letter-spacing: 1px;
		   background: transparent;
		}
		.form-group{
			width: 82%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #e7e7e7;
		}
	  .form-group > .control-label{
		  color:#000;
		  font-size: 0.44rem;
		  font-weight: 500;
	  }
		input:focus{
		  border: none;
		  outline: none;
	  }
		.form-control{
			border: none;
			outline: none;
			padding: 0;
			height: 0.8rem;
			width: 5rem;
			margin-top: 0.17rem;
			color: #000;
		}
		#button{
			width: 82%;
			height: 1.2rem; 
			margin: 1rem auto;
			background-color: #08c261;
			border: none !important;
			border-radius: 5px;
			display: block;
			color: #fff;
			font-size: 0.43rem;
		}
		footer {
		width: 10rem;
		height: 1.33rem;
		left: 50%;
		transform: translate(-50%);
		background-color: #131314;
		position: fixed;
		bottom: 0;
		z-index: 1111;
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
		padding: 5px 0;
	}
	footer a {
		color: #fff98d;
		display: block;
		text-align: center;
		text-decoration: none;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		-webkit-user-select: none;
		-moz-user-focus: none;
		-moz-user-select: none;
		font-size: 0.246rem;
	}
	footer a p{
		color: #fff98d;
		margin: 0 !important;
	}
	footer a img{
		width:0.72rem;
		height: 0.653rem;
	}
	.logo img{
		width: 5.33rem;
		display: block;
		margin:  0 auto 0.5rem auto;
	}
	#pos{
		position: relative;
		top:3rem;
	}
	.black_overlay4{
      display: none;
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      background-color: black;
      z-index:100111;
      -moz-opacity: 0.8;
      opacity:.80;
      filter: alpha(opacity=88);
    }
	.white_content4 {
      display: none;
      position: absolute;
      top: 35%;
      /* left: 25%; */
      bottom: 0;
      width: 10rem;
      height: 14.33rem;
      /* padding: 20px; */
      /* border: 10px solid orange; */
      background-color: #262626;
      z-index:100211;
      /* overflow: auto; */
      border-top: 2px solid #ffe668;
    }
    .close4{
        display: none;
        width: 0.88rem;
        height: 2.09rem;
        position: absolute;
        top:24%;
        left:50%;
        bottom: 13.24rem;
        z-index: 111111;
        transform: translate(-0.44rem);
    }
   #light4>p{
        width: 10rem;
        margin: 0;
        height: 1.06rem;
        border-bottom: 1px solid #67603a;
        text-align: center;
        line-height: 1.06rem;
        font-size: 0.546rem;
        color: #ffe668;
    }
	#left-backIcon{
		height: 2rem;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 24px;
		box-sizing: border-box;
	}
	#left-backIcon img{
		width: 0.72rem;
		height: 0.64rem;
	}
	#left-backIcon span{
		flex: 1;
		padding-left: 16px;
		box-sizing: border-box;
		color: #ebcf0b;
		text-align: left;
		font-size: 0.4rem;
	}
	</style>
	<body>
		<header>
			<div id="left-backIcon" onclick="javascrit:history.back()">
				<img src="__PUBLIC__/Home/img/backIcon.png" alt="">
				<span></span>
			</div>
		</header>
		<div class="text-center loginscreen  animated fadeInDown" id="pos">
			<div>
				<!-- <div>
					<h1 style="height:60px"></h1>
				</div> -->
				<!-- <h3>绑定用户(可用户网页登录)</h3> -->
				<form class="m-t" role="form" method="post" action="{:U('Home/Index/bind_action')}" id="LoginForm">
				<div class="form-group">
					<label class="control-label">nickname：&#x3000;&#x3000;&#x3000;&#x3000;</label>
					<input type="text" id="nickname" name="nickname" value="{$user.nickname}" class="form-control" placeholder="nickname" readonly="">
				</div>
				<div class="form-group">
					<label class="control-label">account：&#x3000;&#x3000;&#x3000;&#x3000;</label>
					<input type="text" id="username" name="username" value="{$user.username}" class="form-control" placeholder="account" readonly>
				</div>
				<div class="form-group">
					<label class="control-label">password：&#x3000;&#x3000;&#x3000;&#x3000;</label>
					<input type="password" id="password" name="password" class="form-control" placeholder="It's better to have upper and lower case and numbers" required>
				</div>
				<div class="form-group">
					<label class="control-label">Repeat password：&#x3000;&#x3000;</label>
					<input type="password" id="repassword" name="" class="form-control" placeholder="Repeat password" required>
				</div>
				<input type="hidden" name="id" value="{$user.id}">
				<button type="submit" class="btn btn-success block full-width m-b" id="button">sure</button>
			</form>
			</div>
		</div>

		<!-- <footer>
			<a href=" /Home/Run/index"><img src="__PUBLIC__/Home/img/11.png" alt="">
				<p>主页</p>
			</a>
			<a href="{:U('Home/Run/active')}"><img src="__PUBLIC__/Home/img/12.png" alt="">
				<p>优惠活动</p>
			</a>
			<a href=" {:U('Home/User/index')}"><img src="__PUBLIC__/Home/img/13.png" alt="" >
				<p>个人中心</p>
			</a>
			<a href="#" onclick="openKefu()"><img src="__PUBLIC__/Home/img/14.png" alt="" >
				<p>在线客服</p>
			</a>
		</footer> -->
		<a href = "javascript:void(0)" onclick = "closeKefu()"><img src="__PUBLIC__/Home/img/close.png" alt=""  id="close4" class="close4">
		</a>
				<div id="light4" class="white_content4">
					<p>Online Service</p>
		   <img src="__PUBLIC__/Home/img/kefu1.jpg" alt="" style="display:block;width:6.33rem;height:8.26rem;margin:0.3rem auto;">
				   </div>
				<div id="fade4" class="black_overlay4"></div>
		<script src="__PUBLIC__/Admin/js/jquery.min.js?v=2.1.4"></script>
		<!-- <script src="__PUBLIC__/Admin/js/bootstrap.min.js?v=3.3.6"></script> -->
		
		<script src="__PUBLIC__/Common/js/ajaxForm.js"></script>
		<script src="__PUBLIC__/layer/layer.js"></script>
		<script>
	
			function openKefu(){
						  document.getElementById('light4').style.display='block';
						  document.getElementById('fade4').style.display='block';
						  document.getElementById('close4').style.display='block';
					  }
					function closeKefu(){
					  document.getElementById('light4').style.display='none';
					  document.getElementById('fade4').style.display='none';
					  document.getElementById('close4').style.display='none';
					}
		  </script>
		<script type="text/javascript">
			

			$(function(){
				$('#LoginForm').ajaxForm({
					beforeSubmit: checkForm,
					success: complete, 
					dataType: 'json'
				});
				function CheckStr(str){
		           var myReg = "[@/'\"#!$%&^*]+";
		             var reg = new RegExp(myReg);
		            if(reg.test(str)){
		            	return true; 
	            	} else {
	            		 return false; 
	            	}
		        }
				function checkForm(){
					if( '' == $.trim($('#username').val())){
						layer.alert('The user name cannot be empty', {icon: 5}, function(index){
			 			layer.close(index);
						$('#username').focus(); 
						});
						return false;
					}
					if (CheckStr($('#username').val())) {
						layer.alert('The user name cannot have special characters', {icon: 5}, function(index){
			 			layer.close(index);
						$('#username').focus(); 
						});
						return false;
					}

					if ($('#password').val().length < 6) {
						layer.alert('Password length cannot be less than 6 bits', {icon: 5}, function(index){
			 			layer.close(index);
						$('#password').focus(); 
						});
						return false;
					}

					if( '' == $.trim($('#password').val())){
						layer.alert('Password cannot be empty', {icon: 5}, function(index){
			 			layer.close(index);
						$('#password').focus(); 
						});
						return false;
					}

					if ($('#password').val() != $('#repassword').val()) {
						layer.alert('The two passwords are not the same', {icon: 5}, function(index){
			 			layer.close(index);
						$('#password').focus(); 
						});
						return false;
					}
				}
				function complete(data){
					if(data.status==1){
						$('.btn').attr('disabled','disabled');
						layer.msg(data.info, function(index){
			 				layer.close(index);
							window.location.href=data.url;
						});
					}else{
						layer.msg(data.info);
						$('#password').val('').focus();
						return false;	
					}
				}
			});
		</script>
		</script>
	</body>

</html>